<template>
	<Modal v-model="modals" scrollable :title="`批量修改`+title" width="800" @on-cancel="cancel" footer-hide
		class-name="vertical-center-modal">
		<Card :bordered="false" dis-hover class="cards">
			<div class="batch">
				<div class='input acea-row row-middle'>
					<Input v-model="batchStock" type='number' class="width15"  @on-change="inputTap"></Input>
					<Button type="primary" @click="countBatch">批量修改</Button>
				</div>
			</div>
			<Table :columns="columns" border ref="selection" :data="stockData" :loading="loading" no-data-text="暂无数据"
				highlight-row no-filtered-data-text="暂无筛选结果" max-height="450">
				<template slot-scope="{ row, index }" slot="image">
					<div class="product-data">
						<img class="image" :src="row.image" />
					</div>
				</template>
				<template slot-scope="{ row, index }" slot="price" v-if="field=='price'">
					<div class="acea-row row-middle">
						<Input class='w100' v-model="row.price" type="number" @on-change="inputChange(row,index)"></Input>
					</div>
				</template>
				<template slot-scope="{ row, index }" slot="quota" v-if="field=='quota'">
					<div class="acea-row row-middle">
						<Input v-model="row.quota" type="number" @on-change="inputChange(row,index)"></Input>
					</div>
				</template>
				<template slot-scope="{ row, index }" slot="stock" v-if="field=='stock'">
					<div class="acea-row row-middle">
						<Input v-model="row.stock" type="number" @on-change="inputChange(row,index)"></Input>
					</div>
				</template>
				
			</Table>
			<div class="footer acea-row row-right">
				<Button class="mr" @click="cancel">取消</Button>
				<Button type="primary" @click="productSaveStocks">提交</Button>
			</div>
		</Card>
	</Modal>
</template>

<script>
	import {
		productAttrs2Api,
		productFastEditApi
	} from '@/api/product.js'
	export default {
		name: 'fastEdit',
		props: {},
		data() {
			return {
				id: 0,
				specType: 0,
				batchShow: false,
				batchStock: 0,
				batchPm: 1,
				modals: false,
				title:"",
				field:"",
				productAttrValueType:0,
				loading: false,
				stockData: [],
				columnsTmp: [{
						title: "图片",
						slot: "image",
						width: 90
					},
					{
						title: "产品规格",
						key: "suk",
					}
				],
				columns:[]
			}
		},
		methods: {
			// 批量设置；
			countBatch() {
				
				this.stockData.forEach(item => {
					item[this.field] = this.batchStock;
				})
			},
			inputChange(row,index){				
				this.stockData[index][this.field] = row[this.field]
			},
			// 批量加减库存
			inputTap() {
				this.batchStock = this.batchStock.replace(/^\d{10}$/g, "0")
				this.batchStock = Math.abs(this.batchStock);
				//this.countBatch();
			},
			// 批量设置入库或是出库
			batchStockTap() {
				this.countBatch();
			},
			// 单个设置
			countStock(row) {
				
			},
			// 设置加减库存
			stockTap(row) {
				this.countStock(row);
			},
			// 设置入库或是出库
			changeTap(row) {
				row.changeNum = row.changeNum.replace(/^\d{10}$/g, "0")
				this.countStock(row);
			},
			batchTap() {
				this.batchShow = !this.batchShow;
			},
			productAttrs(data) {
				this.specType = data.spec_type;
				this.id = data.id;
				this.columns = [...this.columnsTmp]
				this.columns.push({title:this.title,slot:this.field,width: 300})				
				productAttrs2Api(data.id, this.productAttrValueType).then(res => {
					let data = res.data;
					this.stockData = data;
				}).catch(err => {
					this.$Message.error(err.msg);
				})
			},
			productSaveStocks() {
				let attrs = [];
				this.stockData.forEach(item => {
					let data = {"unique": item.unique}
					data[this.field] = item[this.field]
					attrs.push(data)
				})
				productFastEditApi({
					attrs: attrs
				}, this.id, this.productAttrValueType).then(res => {
					this.$Message.success('修改成功');
					this.cancel();
					this.$emit('fastChange', res.data.num,this.field)
				}).catch(err => {
					this.$Message.error(err.msg);
				})
			},
			cancel() {
				this.modals = false;
				this.batchShow = false;
				this.batchPm = 1;
				this.batchStock = 0;
			}
		}
	}
</script>

<style lang="stylus" scoped>
	/*定义滑块 内阴影+圆角*/
	/deep/::-webkit-scrollbar-thumb {
		-webkit-box-shadow: inset 0 0 6px #999;
	}

	/deep/::-webkit-scrollbar {
		width: 4px !important;
		/*对垂直流动条有效*/
	}

	.footer {
		margin-top 20px;
	}

	.product-data .image {
		width: 50px !important;
		height: 50px !important;
	}

	.cards {
		position relative;
	}

	.batch {
		position absolute;
		right 10px;
		z-index 9;
		top: 13px;

		.input {
			
			box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
			border-radius: 4px;
			margin-right :2px;
		}
		.width15{
			margin-right :4px;
			
		}
		.name {
			font-size 13px;
			color: #1890FF;
			margin-bottom 10px;
			cursor pointer;

			.iconfont {
				font-size 12px;
				margin-left 4px;
			}
		}
	}
	
	.w100{
		width:100px;		
	}

	/deep/.ivu-select-single .ivu-select-selection .ivu-select-placeholder,
	/deep/.ivu-select-single .ivu-select-selection .ivu-select-selected-value {
		font-size 13px !important;
	}

	/deep/.ivu-card-body {
		padding 0 !important;
	}

	/deep/.ivu-input:focus {
		border-color #dcdee2 !important;
		box-shadow unset !important;
	}

	/deep/.ivu-input:hover {
		border-color #dcdee2 !important;
	}

	/deep/.ivu-input {
		//border-right 0 !important;
		transition: unset !important;
	}

	/deep/.ivu-input-group-append {
		background-color #fff !important;
	}

	/deep/.ivu-table {
		overflow unset !important;
	}

	/deep/.ivu-table-cell {
		overflow unset !important;
		font-size 13px !important;
	}

	/deep/.ivu-table-border:after {
		background-color #fff;
	}

	/deep/.ivu-table-header table {
		border-top: 0 !important;
	}

	/deep/.ivu-modal-body {
		padding-top 0 !important;
	}

	.ivu-table-wrapper-with-border {
		border 0 !important;
	}

	/deep/.ivu-table-border th,
	/deep/.ivu-table-border td {
		border-right 0 !important;
	}
</style>
